<template>
    <div class="tip">
        <!--头部导航-->
        <mt-header fixed title="商品购买">
            <router-link to="/Home" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
            <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
        <!--商品列表页开始-->
        <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(x,index) in list" :key="index">
		            <router-link v-bind="{'to':'/shop/shopifo/' + x. id}"> <!--这里的id是数据中的id，最终会传到main.js中-->
		                <img class="mui-media-object" v-bind:src="x.img_url">
		                <div class="mui-media-body" v-text="x.title"></div>
                        <div class="desc">
                            <p class="price">
                                <span>活动价:￥{{x.sell_price}}</span>
                                <del>原价:￥{{x.market_price}}</del>
                            </p>
                            <p class="content-text">
                                <span>已售出:{{x.click}}</span>
                                <span>上市时间:{{x.add_time | datefmate("YYYY-MM-DD")}}</span>
                            </p>
                            <p>详情:{{x.zhaiyao}}</p>
                        </div>
                    </router-link>
                </li>
		    </ul>    
		</div>
        <mt-button plain type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import apidoma from "../../kits/common.js";
    export default {
        data(){ //组件中的data是个函数，且要返回一个对象
            return {
                page: 1,
                list: []
            }
        },
        created(){
            var all = 1; //不传默认获取第一页数据
            this.getImg(all);
        },
        methods: {
            getImg(page){
                var page = this.page;
                // 确定url地址
                const url = apidoma.domainName + "/api/getgoods?pageindex=" + page;
                this.$http.get(url).then(function(response){
                    // this.list = this.list.concat(response.body.message); //方式一：
                    this.list.push.apply(this.list,response.body.message); //方式二：
                });
            },
            getMore(){//实现加载更过数据功能
                this.page++;
                this.getImg(this.page);
            }
        }
    }
</script>

<style scoped>
    .mui-content > .mui-table-view:first-child {
        margin-top: -5px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell {
        padding: 0;
        margin: 0;
        border: 1px solid rgba(0,0,0,0.3);
        box-shadow: 2px 2px 2px #000;
        margin-left: 5px;
        margin-top: 10px;
    }
    .mui-table-view-cell a{
        margin: 0;
        padding: 0;
    }
    .mui-table-view.mui-grid-view {
        padding: 0;
    }
    .mui-col-xs-6 {
        width: 48%;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        color: #088bef;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
        margin: 0;
    }
    .desc {
        width: 100%;
        background-color: rgba(0,0,0,0.3);
        padding: 5px;
    }
    .mui-table-view-cell p {
        text-align: left;
    }
    .price span {
        color: #e92322;
        width: 33%;
        font-size: 14px;
        /*margin-right: 20px;*/
    }
    .content-text {
        font-size: 10px;
    }
    .desc p:last-of-type {
        color: #181ac3;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    /*加载更多按钮*/
    .mint-button--danger.is-plain {
        margin-top: 10px;
        margin-left: 5px;
    }
    .mint-button--large {
        width: 97.5%;
    }
</style>


